<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fcd{
           height: 70px;
           width: 100px;
           border: 1px solid black;
       }
       .fcdiv{
           height: 100px;
           width: 100px;
           position: absolute;
           left: 0;
           display: none;
           /* background: palevioletred; */
           /* opacity: 0.5; */
           
       }
       .fcdiv button{
           height: 100px;
           width: 100px;
           background: pink;
       }
       img{
           height: 100px;
           width: 100px;
       }
       h1{
           margin: 20px;
           font-weight: bolder;
           font-size: larger;
       }
       #fcbtn{
           width: 100px;
           display: inline-block;
           height: 30px;
           margin-bottom: 20px;
           line-height: 30px;
           border: 1px solid gray;
       }
        #testa{
            display: inline-block;
            width: 88px;
            height: 88px;
            border: 1px solid red;
            text-align: center;
       }
        #testa button{
            margin-top: 5px;
            border: 1px solid red;
        }
        #a1{
           display: block;
           width: 100px;
           height: 130px;
       }
       #a2{
           margin-top: 10px;
           display: block;
           width: 100px;
           height: 130px;
           background: yellowgreen;
       }
       #over{
           display: block;
           width: 100px;
           height: 130px;
           background: orange;
           border: 4px solid black;
           overflow: hidden;
       }
       .title{
           margin: 10px auto;
           line-height: 20px;
           height: 20px;
       }
    </style>
        <script src='./defineindex.js'></script>
</head>
<body>
    <div>
        <div class="title">
            subelements 测试
        </div>
        <a href="" id='testa'>
            <div>
                <button>button</button>
            </div>
            <div>
                <button>button</button>
            </div>
            <div>
                <button>button</button>
            </div>
            <div>
                <span>span</span>
            </div>
        </a>
    </div>
    <div>
        <div class="title">
            overflow
        </div>
        <div>
            <div id="over">
                <a id="a1">a1</a>
                <a id="a2">a2</a>
            </div>
        </div>
    </div>
    <div>
        <div class="title">
            浮层测试 display
        </div>
            <div>
                <div id="fcbtn">点击显示浮层</div>
                <div>
                    <div id='fc' class="fcdiv">
                        <button>我是浮层 button</button>
                    </div>
                </div>
                <div>
                    <div>
                        <div>
                            <button class="fcd">我是底部 button</button>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <script>
            var clickflag = false;
            fcbtn.onclick = function(){
                if(!clickflag){
                    fc.style.display = 'block';
                    clickflag = true;
                }else{
                    fc.style.display = 'none';
                    clickflag = false;  
                }
            }
    </script>
</body>
</html>